<script setup lang="ts">
import { ref } from "vue";

//遍历：数组，对象，数字
const arr = ref(["糖", "冰糖", "白糖", "红糖"]);
const preson = ref({ name: "xxx", age: 11, gender: "lo" });
</script>

<template>
  <div class="app-page">
    <!-- 数组遍历 -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        序号：{{ index }} -------{{ item }}
      </li>
    </ul>
    <ul>
      <li v-for="item in arr" :key="item">
        {{ item }}
      </li>
    </ul>

    <!-- 对象遍历 -->
    <!-- 
      value :对象的值
      key：对象中的键
      index：遍历索引从0开始
     -->
    <ul>
      <li v-for="(value, key, index) in preson" :key="index">
        键：{{ key }},值：{{ value }},索引：{{ index }}
      </li>
    </ul>

    <!-- 数字遍历 -->
    <div v-for="item in 10" :key="item">{{ item }}</div>
  </div>
</template>

<style lang="css" scoped></style>
